<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>发起请求</button>
  <button>取消请求</button>
  <script>
    var button = document.querySelectorAll("button")
    var postHttp = button[0]
    var cancleHttp = button[1]
    var controller;
    postHttp.onclick = function () {
      controller = new AbortController()
      fetch('http://127.0.0.1:8081/url', {
        method: 'post',
        mode: "cors",
        signal: controller.signal
      }).then(async e => {
        // const data = await e.text()
        // console.log(JSON.parse(data));
        const reader = e.body.getReader()
        let result = ''
        while (1) {
          const { done, value } = await reader.read();
          // let encoder = new TextEncoder()
          let decoder = new TextDecoder()
          const str=decoder.decode(value)
          console.log(str);
          result=result+str
          if (done) {
            console.log(result);
            break;
          }
        }
      })
    }

    cancleHttp.onclick = function () {
      controller.abort('请求取消')
    }

  </script>
</body>

</html>